Reactivity: Proxyオブジェクトを理解する
どうにかしてステートが変更された時に updateComponent を実行したい
-> Proxy と呼ばれるオブジェクトを使う!
使い型
code: typescript
const o = new Proxy({value: 1}, {})
console.log(o.value) // 1
普通のオブジェクトのように動作する
第二引数にオブジェクトの操作に対するハンドラを登録することができる。
code: typescript
const o = new Proxy(
{ value: 1, value2: 2}
{
get(target, key, receiver) {
console.log(target: ${target}, key: ${key})
}
}
)
↑ オブジェクトのプロパティにアクセス(get) した際に、log出力されるようになっている
code: typescript
const o = new Proxy(
{ value: 1, value2: 2 },
{
set(target, key, value, receiver) {
console.log('hello from setter')
return true
},
},
)
↑ オブジェクトのプロパティの値を更新(set)する際も同様